<template>
  <div class="funnel-report-config">
    <a-form-model labelAlign="right" layout="horizontal" :labelCol="{span: 2, offset: 0}">
      <a-form-model-item label="指标" prop="measure">
        <a-select v-model="funnel.config.measure.name">
          <a-select-option v-for="(item, index) in measures" :key="index" :value="item.name" @change="changeMeasure">{{ item.displayName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="窗口期">
        <a-row>
          <a-col span="12">
            <FunnelWindow v-model="funnel.config.window"></FunnelWindow>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="步骤">
        <FunnelStepGroup v-bind:steps="funnel.config.steps" v-bind:properties="properties" v-bind:events="events" v-bind:datasourceId="form.datasourceId"></FunnelStepGroup>
      </a-form-model-item>
      <a-form-model-item label="细分漏斗">
        <a-select v-model="config.dimension" placeholder="请选择细分维度" allowClear style="width: 200px;">
          <a-select-opt-group label="事件属性">
            <a-select-option v-if="item.name.indexOf('events') === 0" v-for="item in properties" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
          </a-select-opt-group>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="筛选条件">
        <a-button @click="addRule">添加筛选</a-button>
        <MultiLevelFilter ref="filter" v-bind:properties="properties" v-model="config.filter" v-bind:datasourceId="form.datasourceId" v-on:remove="demote"></MultiLevelFilter>
      </a-form-model-item>
      <a-form-model-item label="时间">
        <a-range-picker @change="onChange" v-model="defaultTime" :placeholder="['开始时间', '结束时间']" />
      </a-form-model-item>
    </a-form-model>
            <!-- <a-form-model-item label="选择漏斗">
              <a-select v-model="config.funnelId" placeholder="请选择漏斗" style="width: 200px;margin-right: 10px;">
                <a-select-option v-for="item in funnels" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
              </a-select>
              <a-button type="primary" @click="add" style="width: 100px;">创建漏斗</a-button>
            </a-form-model-item> -->
            <!-- <a-form-model-item label="细分漏斗">
              <a-select v-model="config.dimension" placeholder="请选择细分维度" allowClear style="width: 200px;">
                <a-select-opt-group label="事件属性">
                  <a-select-option v-if="item.name.indexOf('events') === 0" v-for="item in properties" :value="item.name" :key="item.name">{{ item.displayName }}</a-select-option>
                </a-select-opt-group>
              </a-select>
            </a-form-model-item> -->
    <!-- <a-modal v-model="addModel.model"
           :confirmLoading="addModel.loading"
           title="创建漏斗"
           width=800
           :maskClosable="false"
           @ok="createFunnel"
           @cancel="cancelForm('addForm')">
      <a-form-model ref="addForm" :model="funnel" :rules="rules">
        <a-form-model-item label="漏斗名称" prop="name">
          <a-input v-model="funnel.name"></a-input>
        </a-form-model-item>
        
      </a-form-model>
    </a-modal> -->
  </div>
</template>

<script>
import FunnelStepGroup from "./components/FunnelStepGroup.vue";
import FunnelWindow from "./components/FunnelWindow.vue";
import MultiLevelFilter from "@/views/components/Filter/MultiLevelFilter.vue";
export default {
  name: "FunnelReportConfig",
  components: {MultiLevelFilter, FunnelStepGroup, FunnelWindow},
  props: {
    config: Object,
    properties: Array,
    events: Array,
    form: Object
  },
  data: function () {
    return {
      funnels: [],
      addModel: {
        model: false,
        loading: false
      },
      defaultTime: null,
      funnel: {
        config: {
          measure: {
            name: 'eship_id',
            value: 'count(distinct eship_id)',
          },
          window: 86400,
          type: 1,
          steps: [],
        }
      },
      rules: {
        name: [
          {required: true, message: '名称不能为空', trigger: 'blur'}
        ]
      },
      measures: [
        {
          name: 'eship_id',
          displayName: '访客数',
          value: 'count(distinct eship_id)',
        },
        {
          name: 'session_id',
          displayName: '会话数',
          value: 'count(distinct session_id)',
        },
      ],
    }
  },
  computed: {},
  watch: {
    funnel: {
      handler (val) {
        this.$set(this.config, "funnel", {...val.config});
      },
      deep: true
    },
  },
  mounted () {
    this.loadFunnels();
    if (this.form.config.config.funnel.steps && this.form.config.config.funnel.steps.length) {
      this.funnel.config = {...this.config.funnel};
    }
    if (this.form.config.time.start || this.form.config.time.end) {
      this.defaultTime = [this.moment(this.form.config.time.start).format('YYYY-MM-DD'), this.moment(this.form.config.time.end).format('YYYY-MM-DD')]
    } else {
      this.defaultTime = null;
    }
  },
  methods: {
    //条件组降级：如果条件组只剩一个条件，那么移除当前条件组，将剩下的这个条件合并到上级条件组中。
    demote: function (index) {
      let originalFilter = this.config.filter;
      let filterIndex = originalFilter.filters.findIndex((item) => {
        return item.index === index;
      });
      if(filterIndex !== -1) {
        let filter = originalFilter.filters[filterIndex];
        originalFilter.filters.splice(filterIndex, 1);
        originalFilter.condition = filter.condition;
        filter.rules.forEach((item, index) => {
          originalFilter.rules.push(item);
        });
        filter.filters.forEach((item, index) => {
          originalFilter.filters.push(item);
        });
      }
    },
    onChange (e, date) {
      this.form.config.time.start = date[0]
      this.form.config.time.end = date[1]
    },
    addRule() {
      this.$refs.filter.addRule();
    },
    loadFunnels: function () {},
    changeMeasure: function(selectedValue) {
      for(let i = 0; i < this.measures.length; i++) {
        if(this.measures[i].name === selectedValue) {
          this.funnel.config.measure.value = this.measures[i].value;
          break;
        }
      }
    },
  },
  created() {}
}
</script>

<style scoped>
.ant-row.ant-form-item {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.funnel-report-config >>> .ant-form-item-control-wrapper {
  flex: 1;
}
</style>
